<template>
  <PermissionContainer
    :jiBieArr="[0, 1, 2]"
    :tipArr="[
      ,
      '电子卡功能只对集团和站点级别开放',
      '因为集团上关于电子卡的共享配置，此级没有配置权限',
      ,
      '您暂未启动电子卡功能',
    ]"
  >
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-position="left"
        class="globalSerchFormStyle"
        label-width="90px"
      >
        <el-row>
          <el-col :span="6" v-if="authUser">
            <el-form-item label="油企名称" prop="enterpriseId" size="small">
              <el-select
                style="width: 170px"
                v-model="queryParams.enterpriseId"
                :clearable="true"
                filterable
                placeholder="请选择油企"
                @change="handleSelectChange"
              >
                <el-option
                  v-for="(item, index) in enterpriseList"
                  :key="index"
                  :value="item.enterpriseId"
                  :label="item.enterpriseName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="$store.state.user.userLevel !== '2'">
            <el-form-item label="油站名称" prop="stationId" size="small">
              <!-- @change="$forceUpdate()" 解决vue2选中后，选择框依旧为空问题 -->
              <el-select
                style="width: 180px"
                v-model="queryParams.stationId"
                :clearable="true"
                filterable
                placeholder="请选择油站名称"
                @change="$forceUpdate()"
              >
                <el-option
                  v-for="item in stationList"
                  :key="item.stationId"
                  :label="item.stationName"
                  :value="item.stationId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户手机号" prop="mobilePhone" size="small">
              <el-input
                style="width: 170px"
                v-model="queryParams.mobilePhone"
                placeholder="请输入客户手机号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>

          <el-col
            :span="6"
            v-if="
              this.$store.state.user.userLevel === '1' ||
              !this.$store.state.user.userLevel
            "
          >
            <el-form-item label="交易类型" prop="payType" size="small">
              <el-select
                style="width: 170px"
                v-model="typeList"
                placeholder="请选择交易类型"
                clearable
                multiple
                size="small"
              >
                <el-option label="移动支付" value="pos" />
                <el-option label="手动充值" value="imp" />
                <el-option label="手动扣减" value="msub" />
                <el-option label="微信充值" value="wx" />
                <el-option label="电子卡支付" value="dzk" />
                <el-option label="充值退款" value="ref" />
                <el-option label="消费退款" value="csRef" />
                <el-option label="消费赠送" value="cs_pt" />
                <el-option label="POS机赠送" value="posPr" />
                <el-option label="消费赠送退款" value="cpRef" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <div v-show="collapse">
          <el-row>
            <el-col :span="6">
              <el-form-item label="电子卡类型" prop="cardOilsType" size="small">
                <el-select
                  style="width: 170px"
                  v-model="queryParams.cardOilsType"
                  placeholder="请选择电子卡类型"
                  clearable
                  size="small"
                >
                  <el-option label="汽油卡" value="1"></el-option>
                  <el-option label="柴油卡" value="2"></el-option>
                  <!-- <el-option label="非油品卡" value="3"></el-option> -->
                  <el-option label="LNG卡" value="3"></el-option>
                  <el-option label="CNG卡" value="4"></el-option>
                  <el-option label="通用卡" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="余额变动" prop="usageType" size="small">
                <el-select
                  style="width: 170px"
                  v-model="queryParams.usageType"
                  placeholder="请选择消费充值类型"
                  clearable
                  size="small"
                >
                  <el-option label="增加" value="+" v-if="isEnterprise" />
                  <el-option label="扣减" value="-" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="交易单号" prop="orderNo" size="small">
                <el-input
                  v-model="queryParams.orderNo"
                  style="width: 170px"
                  placeholder="请输入交易单号"
                  clearable
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交易时间" size="small">
                <el-date-picker
                  v-model="dateRangeCreatedDate"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 170px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" v-if="authUser">
              <el-form-item
                label="电子卡权限"
                size="small"
                prop="cardUseRangeFlag"
              >
                <el-select
                  style="width: 170px"
                  v-model="queryParams.cardUseRangeFlag"
                  :clearable="true"
                  filterable
                  placeholder="请选择电子卡权限"
                >
                  <el-option value="1" label="多站通用"></el-option>
                  <el-option value="2" label="单站使用"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="会员编码" prop="memberCode" size="small">
                <el-input
                  style="width: 170px"
                  v-model="queryParams.memberCode"
                  placeholder="请输入会员编码"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <el-row class="global_el_rowStyle" :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            icon="el-icon-refresh"
            type="primary"
            size="mini"
            @click="resetQuery"
            plain
            >重置</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            plain
            >导出</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            plain
            size="mini"
            style="margin-left: 10px"
            id="closeSearchBtn"
            @click="
              (closeSearch) => {
                collapse = !collapse;
              }
            "
          >
            {{ collapse ? "收起" : "展开更多" }}
            <i
              :class="collapse ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"
            ></i>
          </el-button>
        </el-col>
      </el-row>

      <div class="summary-container">
        <!-- 电子卡 -->
        <div class="summary-item f1">
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">电子卡余额总计</span>
            <span class="summary-sum"
              >{{
                sumCard.electronCardTotalBalance
                  ? sumCard.electronCardTotalBalance.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">电子卡充值总计</span>
            <span class="summary-sum"
              >{{
                sumCard.electronCardTotalRecharge
                  ? sumCard.electronCardTotalRecharge.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">电子卡赠送总计</span>
            <span class="summary-sum"
              >{{
                sumCard.electronCardTotalPresentAmt
                  ? sumCard.electronCardTotalPresentAmt.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">电子卡消费总计</span>
            <span class="summary-sum"
              >{{
                sumCard.electronCardTotalConsume
                  ? sumCard.electronCardTotalConsume.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
        </div>
        <!-- 汽油卡 -->
        <div class="summary-item f1" v-if="cardOilsTypeList.includes('1')">
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">汽油卡余额总计</span>
            <span class="summary-sum"
              >{{
                sumCard.gasElectronCardTotalBalance
                  ? sumCard.gasElectronCardTotalBalance.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">汽油卡充值总计</span>
            <span class="summary-sum"
              >{{
                sumCard.gasElectronCardTotalRecharge
                  ? sumCard.gasElectronCardTotalRecharge.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">汽油卡赠送总计</span>
            <span class="summary-sum"
              >{{
                sumCard.gasElectronCardTotalPresentAmt
                  ? sumCard.gasElectronCardTotalPresentAmt.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">汽油卡消费总计</span>
            <span class="summary-sum"
              >{{
                sumCard.gaseElectronCardTotalConsume
                  ? sumCard.gaseElectronCardTotalConsume.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
        </div>
        <!-- 柴油卡 -->
        <div class="summary-item f1" v-if="cardOilsTypeList.includes('2')">
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">柴油卡余额总计</span>
            <span class="summary-sum"
              >{{
                sumCard.dieselElectronCardTotalBalance
                  ? sumCard.dieselElectronCardTotalBalance.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">柴油卡充值总计</span>
            <span class="summary-sum"
              >{{
                sumCard.dieselElectronCardTotalRecharge
                  ? sumCard.dieselElectronCardTotalRecharge.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">柴油卡赠送总计</span>
            <span class="summary-sum"
              >{{
                sumCard.dieselElectronCardTotalPresentAmt
                  ? sumCard.dieselElectronCardTotalPresentAmt.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">柴油卡消费总计</span>
            <span class="summary-sum"
              >{{
                sumCard.dieselElectronCardTotalConsume
                  ? sumCard.dieselElectronCardTotalConsume.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
        </div>
        <!-- LNG卡 -->
        <div class="summary-item f1" v-if="cardOilsTypeList.includes('3')">
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">LNG卡余额总计</span>
            <span class="summary-sum"
              >{{
                sumCard.lngElectronCardTotalBalance
                  ? sumCard.lngElectronCardTotalBalance.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">LNG卡充值总计</span>
            <span class="summary-sum"
              >{{
                sumCard.lngElectronCardTotalRecharge
                  ? sumCard.lngElectronCardTotalRecharge.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">LNG卡赠送总计</span>
            <span class="summary-sum"
              >{{
                sumCard.lngElectronCardTotalPresentAmt
                  ? sumCard.lngElectronCardTotalPresentAmt.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">LNG卡消费总计</span>
            <span class="summary-sum"
              >{{
                sumCard.lngElectronCardTotalConsume
                  ? sumCard.lngElectronCardTotalConsume.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
        </div>
        <!-- CNG卡 -->
        <div class="summary-item f1" v-if="cardOilsTypeList.includes('4')">
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">CNG卡余额总计</span>
            <span class="summary-sum"
              >{{
                sumCard.cngElectronCardTotalBalance
                  ? sumCard.cngElectronCardTotalBalance.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">CNG卡充值总计</span>
            <span class="summary-sum"
              >{{
                sumCard.cngElectronCardTotalRecharge
                  ? sumCard.cngElectronCardTotalRecharge.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">CNG卡赠送总计</span>
            <span class="summary-sum"
              >{{
                sumCard.cngElectronCardTotalPresentAmt
                  ? sumCard.cngElectronCardTotalPresentAmt.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
          <div class="summary-item-box f1">
            <span class="summary-title">CNG卡消费总计</span>
            <span class="summary-sum"
              >{{
                sumCard.cNGElectronCardTotalConsume
                  ? sumCard.cNGElectronCardTotalConsume.toLocaleString()
                  : 0
              }}
              元</span
            >
          </div>
        </div>
        <!-- 通用卡 -->
        <div class="summary-item f1" v-if="cardOilsTypeList.includes('0')">
          <div class="summary-item-box f1">
            <span class="summary-title">通用卡余额总计</span>
            <span class="summary-sum"
              >{{
                sumCard.genericElectronCardTotalBalance
                  ? sumCard.genericElectronCardTotalBalance.toLocaleString()
                  : 0
              }}
              元
            </span>
          </div>
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">通用卡充值总计</span>
            <span class="summary-sum">
              {{
                sumCard.genericElectronCardTotalRecharge
                  ? sumCard.genericElectronCardTotalRecharge.toLocaleString()
                  : 0
              }}
              元
            </span>
          </div>
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">通用卡赠送总计</span>
            <span class="summary-sum">
              {{
                sumCard.genericElectronCardTotalPresentAmt
                  ? sumCard.genericElectronCardTotalPresentAmt.toLocaleString()
                  : 0
              }}
              元
            </span>
          </div>
          <div class="summary-item-box f1" >
            <span class="summary-title">通用卡消费总计</span>
            <span class="summary-sum">
              {{
                sumCard.genericElectronCardTotalConsume
                  ? sumCard.genericElectronCardTotalConsume.toLocaleString()
                  : 0
              }}
              元
            </span>
          </div>
        </div>
        <!-- 返利金额 -->
        <div class="summary-item f1" v-if="cardOilsTypeList.includes('0')">
          <div class="summary-item-box f1">
            <span class="summary-title">返利金消费总计</span>
            <span class="summary-sum"
              >{{
                sumCard.returnCashTotal
                  ? sumCard.returnCashTotal.toLocaleString()
                  : 0
              }}
              元
            </span>
          </div>
          <div class="summary-item-box f1" v-if="isEnterprise">
            <span class="summary-title">返利金赠送总计</span>
            <span class="summary-sum">
              {{
                sumCard.giftReturnCashTotal
                  ? sumCard.giftReturnCashTotal.toLocaleString()
                  : 0
              }}
              元
            </span>
          </div>
        </div>
      </div>

      <el-table :data="recordList" v-loading="loading" stripe>
        <!-- <af-table-column label="id" align="left" prop="id" v-if="false" /> -->
        <af-table-column
          v-if="authUser"
          label="油企名称"
          align="left"
          prop="enterpriseName"
        />
        <af-table-column
          label="油站名称"
          align="left"
          prop="stationName"
          v-if="$store.state.user.userLevel != '2'"
        />
        <af-table-column label="交易时间" align="left" prop="createTime" />

        <af-table-column label="客户名" align="left" prop="customerName" />
        <af-table-column label="客户手机号" align="left" prop="mobilePhone" />
        <af-table-column
          label="电子卡类型"
          align="left"
          prop="cardOilsType"
          :formatter="cardOilsTypeFotmat"
        />

        <af-table-column
          v-if="authUser"
          label="电子卡权限"
          align="left"
          prop="cardUseRangeFlag"
          :formatter="cardUseRangeFlagFormat"
        />

        <af-table-column
          label="交易类型"
          align="left"
          prop="payType"
          :formatter="payTypeFotmat"
          width="120"
        />

        <af-table-column
          label="余额变动"
          align="left"
          prop="usageType"
          :formatter="usageTypeFotmat"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.usageType === '+'" style="color: blue">
              增加
            </span>
            <span v-if="scope.row.usageType === '-'" style="color: orange">
              扣减
            </span>
          </template>
        </af-table-column>
        <af-table-column
          label="应付金额(元)"
          align="left"
          prop="payableAmount"
        />
        <af-table-column label="实付金额(元)" align="left" prop="paidAmount" />
        <af-table-column label="优惠(元)" align="left" prop="discountSum" />
        <af-table-column label="本金账户(元)" align="left" prop="amt" />
        <af-table-column label="赠送账户(元)" align="left" prop="presentAmt" />
        <af-table-column label="返利账户消费（元）" align="left" prop="returnCashAmt" />
        <af-table-column label="赠送返利金（元）" align="left" prop="giftReturnCashAmt" />
        <af-table-column label="电子卡余额(元)" align="left" prop="balance" />
        <af-table-column label="油品价格(元)" align="left" prop="oilPirce" />
        <af-table-column label="数量(L/kg)" align="left" prop="orderLiters" />
        <af-table-column label="加油员" align="left" prop="operatorName" />
        <af-table-column
          label="备注"
          align="left"
          prop="reason"
          show-overflow-tooltip
        />

        <af-table-column
          label="开票状态"
          align="left"
          prop="invoiceStatus"
          width="120"
          :formatter="forinvoiceStatus"
        />

        <af-table-column label="交易单号" align="left" prop="orderNo" />

        <af-table-column label="会员编码" align="left" prop="memberCode" />

        <!-- <af-table-column
          label="油站ID"
          align="left"
          prop="stationId"
          v-if="false"
        /> -->
        <af-table-column
          label="操作"
          align="left"
          prop=""
          fixed="right"
          width="140"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.payType === 'wx' || scope.row.payType === 'pos'"
              @click="gotoRefund(scope.row)"
              >退款
            </el-button>
            <el-button type="text" @click="recordBilling(scope.row)"
              >开票记录
            </el-button>
          </template>
        </af-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 确认退款弹框 -->
      <el-dialog title="退款" :visible.sync="refundDialogVisible" width="30%">
        <span>确认退款？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="refundDialogVisible = false">取 消</el-button>
          <el-button :loading="refundLoading" type="primary" @click="handleRefund">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 开票记录 -->
      <InvoiceRecord
        :invoiceDialog.sync="invoiceDialog"
        :currentRowData="currentRowData"
      ></InvoiceRecord>
    </div>
  </PermissionContainer>
</template>

<script>
import { timeComparison } from "@/utils/timeConversion";
import InvoiceRecord from "./invoice_record.vue";
import { listRecord, refundApi, exportBalanceApi } from "@/api/customer/record";
import { cardUserSum } from "@/api/customer/card";
import { enterpriseList } from "@/api/station/order";
import { selectCustomerCardSetting } from "@/api/customer/cardSetting";
import { listEnterpriseStation } from "@/api/dept";
export default {
  components: { InvoiceRecord },
  name: "Dzk_Bill",
  data() {
    return {
      refundLoading: false,
      //交易余额数组
      typeList: [],
      // 总条数
      total: 0,
      // 客户电子会员卡充值消费记录表格数据
      recordList: [],
      sumCard: {
        qyAmt: null,
        cyAmt: null,
        lngamt: null,
        cngamt: null,
      },
      //查询日期
      dateRangeCreatedDate: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: null,
        customerNo: null,
        customerName: null,
        usageType: null,
        payType: null,
        cardOilsType: null,
        mobilePhone: null,
        levelId: this.levelId,
        cardUseRangeFlag: "",
        memberCode: null,
      },
      collapse: false,
      collapseAmt: false,
      enterpriseList: [],
      stationList: [],
      cardOilsTypeList: [],
      refundDialogVisible: false,
      currentSelectRefundInfo: {},

      exportLoading: false,

      invoiceDialog: false, // 开票记录弹框
      currentRowData: {}, // 当前选中行数据
    };
  },
  created() {
    this.getList();
    this.getCardSum();
    // 只有在admin下调用油企查询
    if (!this.presentEnterprise) {
      this.getEnterpriseList();
    }
    this.getCustomerCardSetting();

    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      this.getStationList(this.presentEnterprise.enterpriseId);
    }
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
    // 下拉选择框改为多选 且值为字符串拼接
    mergeType() {
      return this.typeList.join(",");
    },
    isEnterprise() {
      let userLevel = this.$store.state.user.userLevel;
      if (userLevel !== "2") {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    /** 导出按钮操作 */
    handleExport() {
      this.queryParams.payType = this.mergeType;
      const params = this.addDateRange(
        this.queryParams,
        this.dateRangeCreatedDate
      );

      // const time = timeComparison("export", params.beginTime, params.endTime);
      // if (!time) return;

      this.$confirm("是否确认导出所有余额明细?", "导出余额明细", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return exportBalanceApi(params);
        })
        .then((response) => {
          this.download(response.msg);
        })
        .catch(() => {});
    },

    // 开票记录
    recordBilling(row) {
      this.currentRowData = row;
      this.invoiceDialog = true;
    },
    // 查询配置了几个电子卡
    getCustomerCardSetting() {
      selectCustomerCardSetting().then((res) => {
        if (res && res.code === 200) {
          if (res.data.cardOilsTypeList) {
            this.cardOilsTypeList = res.data.cardOilsTypeList;
          } else {
            this.cardOilsTypeList = [];
          }
        }
      });
    },
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    // 根据油企获取该油企下的油站
    handleSelectChange(enterpriseId) {
      this.stationList = [];
      this.queryParams.stationId = null;
      this.getStationList(enterpriseId);
    },
    getStationList(enterpriseId) {
      listEnterpriseStation({ enterpriseId: enterpriseId }).then((res) => {
        this.stationList = res;
      });
    },
    usageTypeFotmat(row, column) {
      if (row.usageType === "+") {
        return "充值";
      } else if (row.usageType === "-") {
        return "消费";
      }
    },
    cardOilsTypeFotmat(row, column) {
      const types = {
        0: "通用卡",
        1: "汽油",
        2: "柴油",
        3: "LNG",
        4: "CNG",
      };
      return types[row.cardOilsType];
    },

    // 开票状态
    forinvoiceStatus(row) {
      let types = {
        0: "未开票",
        1: "已开票",
        2: "部分开票",
        3: "不支持开票",
      };
      return types[row.invoiceStatus];
    },

    payTypeFotmat(row, column) {
      const types = {
        pos: "移动支付",
        imp: "手动充值",
        msub: "手动扣减",
        wx: "微信充值",
        ref: "充值退款",
        csRef: "消费退款",
        cs_pt: "消费赠送",
        posPr: "POS机赠送",
        cpRef: "消费赠送退款",
      };
      if (row.payType === "" || row.payType === null) {
        return "电子卡支付";
      } else {
        return types[row.payType];
      }
    },
    cardUseRangeFlagFormat(row) {
      if (row.cardUseRangeFlag === "1") {
        return "多站通用";
      }
      if (row.cardUseRangeFlag === "2") {
        return "单站使用";
      }
    },
    cardUseRangeFlagType(row) {
      let types = {
        1: "多站通用",
        2: "单站使用",
      };
      return types[row.cardUseRangeFlag];
    },
    /** 查询客户电子会员卡充值消费记录列表 */
    getList() {
      this.loading = true;
      this.queryParams.payType = this.mergeType;
      const params = { ...this.queryParams };
      params.levelId = this.levelId;

      // const time = timeComparison("earching", params.beginTime, params.endTime);
      // if (!time) return (this.loading = false);

      listRecord(this.addDateRange(params, this.dateRangeCreatedDate)).then(
        (response) => {
          this.recordList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 分类统计电子卡的余额*/
    getCardSum() {
      this.queryParams.payType = this.mergeType;
      this.queryParams.levelId = this.levelId;

      const params = this.addDateRange(
        this.queryParams,
        this.dateRangeCreatedDate
      );

      // const time = timeComparison("earching", params.beginTime, params.endTime);
      // if (!time) return;

      cardUserSum(params).then((response) => {
        this.sumCard = response.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getCardSum();
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.typeList = [];
      this.dateRangeCreatedDate = [];
      this.handleQuery();
    },

    gotoRefund(row) {
      this.refundDialogVisible = true;
      this.currentSelectRefundInfo = row;
    },

    /**退款 */
    async handleRefund() {
      this.refundLoading = true
      const { id } = this.currentSelectRefundInfo;
      try{
        await refundApi(id);
        this.msgSuccess("退款成功");
      }finally{
        this.refundLoading = false
        this.refundDialogVisible = false;
        this.getCardSum();
        this.getList();
        }
    },
  },
};
</script>
<style lang="scss" scoped>
.details-box {
  border: 1px solid #797979;
  border-radius: 20px;
  width: fit-content;
  padding: 0px 10px;
  // margin-left: 10px;
}

.el-item-mb {
  margin-bottom: 5px !important;
}

ul {
  margin: 10px 0;
  padding-left: 0 !important;

  li {
    list-style: none;
    font-size: 13px;
    margin: 5px 0;

    span {
      font-size: 14px;
      // font-weight: 700;
    }
  }
}

.summary-container {
  width: 100%;
  border: 1px solid #e7e3e3;
  padding: 10px 5px;
  border-radius: 10px;
  // display: grid;
  // grid-template-columns: repeat(5, 1fr);
  // grid-template-rows: repeat(3, 80px);
  margin-bottom: 14px;

  display: flex;
  flex-direction: row;

  .summary-item {
    // height: 240px;
    display: flex;
    flex-direction: column;

    // width: 100%;
    // height: 100%;
    // display: flex;
    // justify-items: center;
    // align-items: center;
    // flex-direction: column;
    border-right: 1px dashed rgba(0, 0, 0, 0.1);

    .summary-item-box {
      border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
      padding: 5px;
      display: flex;
      justify-items: center;
      align-items: center;
      flex-direction: column;

      .summary-title {
        font-size: 18px;
      }

      .summary-sum {
        font-size: 24px;
        font-weight: 700;
      }
    }
  }

  .summary-item:last-child {
    border-right: none;
  }

  .summary-item-box:nth-last-child(-n + 1) {
    border-bottom: none;
  }
}

.f1 {
  flex: 1;
}

element.style {
  width: 100%;
  max-width: 264.25px;
}
::v-deep .el-select__tags {
  justify-content: unset !important;
}
</style>
